<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>雨滴特效</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #canvas{
            background-color:rgba(255,255,255,0.5);
	        display:block;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="1000" height="800"></canvas>

    <script>
        function Drop(){}
        let canvas = document.getElementById('canvas');
        let ctx = canvas.getContext('2d');
        let w = canvas.width = window.innerWidth;
        let h = canvas.height = window.innerWidth;
        window.onresize = function(){
            w = canvas.width = window.innerWidth;
            h = canvas.height = window.innerWidth;
        }
        ctx.fillStyle = 'aqua';
        var drops = []
        Drop.prototype = {
            init:function(){
                //设置坐标
                this.x = random(0,w);
                this.y = 0;
                this.vy = random(4,5);//y方向掉落的速度
                this.l = random(0.8*h,0.9*h);//掉落的最大高度
                this.r = 1;//半径
                this.vr = 1;//半径增大的速度
                //雨滴消失时的透明度
                this.a = 1;
                this.va = 0.96;//透明度变化系数
            },
            draw:function(){
                if(this.y > this.l)//已经到地上了 绘制消失图形
                {
                    ctx.beginPath(); //先开始路径
                    ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
                    ctx.strokeStyle = "rgba(0,255,255," + this.a + ")";
                    ctx.closePath();
                    ctx.stroke();
                }
                else//还在过程中
                {
                    ctx.fillStyle = "rgb(0,255,255)";
                    ctx.fillRect(this.x, this.y, 2, 10);
                }

                this.update();
            },
            update:function(){
                if(this.y<this.l)
                {
                    this.y += this.vy;
                }
                else
                {
                    if(this.a>0.03)
                    {
                        this.r += this.vr;
                        if(this.r > 50)
                        {
                            this.a *= this.va;
                        }
                    }
                    else
                    {
                        this.init();
                    }
                }
            }
        }
        for (let index = 0; index < 30; index++) {
            setTimeout(() => {
                let drop = new Drop();
                drop.init();
                drops.push(drop)
            }, index*300);
            
        }

        function move()
        {
            ctx.fillStyle = 'rgba(0,0,0,0.1)'
            ctx.fillRect(0,0,w,h);
            for (let index = 0; index < drops.length; index++) {
                drops[index].draw();
            }

            requestAnimationFrame(move);
        }
        move();
        function random(min,max){
            return Math.random()*(max - min)+min;
        }
    </script>
</body>
</html>